<template>
	<view class="main">
		<view style="height:50rpx;"></view>
		<view>
			<view style="padding:20rpx 0;">
				<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230113/4794b83ccc19b4ef8bdb144eceb4dbd5.png"></image>
				
			</view>
			<view style="padding:0 20rpx 20rpx;padding-bottom:100rpx;position: relative;top:-150rpx;">
				<view style="background-color: #fff;border-radius: 15rpx;padding-bottom:20rpx;">
					<view class="vote_head">
						<view class="vote_title">
							<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230110/0a380785a6b44b22d473a4d7c5d5a2c7.png"></image>
						</view>
						<view class="fu_title">
							<text>每人仅限1次投票机会哦！</text>
						
						</view>
						<view class="title_decri">{{span}}</view>
					</view>
					<view>
						<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<u-grid :border="false" col="2">
							<u-grid-item v-for="(item,index) in list" :key="index">
								<view class="vote_con u-rela">
									<image class="vote_img" mode="aspectFill" :src="item.avatar"></image>
									
									<view style="font-weight: bold;">{{item.name}}</view>
									<view class="dp overflow" style="color:#333;">
										<text>{{item.span}}</text>
									</view>
									<view class="dp overflows" style="padding:0 20rpx;height:75rpx;margin-top:0;margin-bottom:10rpx;color:#666;">
										<text>{{item.description}}</text>
									</view>
									
										<view class="vote_btn" @click="tovote(item)">
											<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230110/095c6eaa6c0907cf7c8e9881ef3d61dc.png"></image>
										</view>
									
									
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				
			</view>
			<u-popup :show="showvote" @close="showvote=false" mode="center" bgColor="transparent">
				<view class="u-rel">
					<image style="width:600rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230110/a1cb9f97023cfca92d1ffd1fd7452504.png"></image>
					<view class="u-abso com">{{comment}}</view>
				
					<view class="u-abso ticket_btn" @click="tolastpage">
						{{pagecon}}
					</view>
				</view>
				<view style="text-align: center;">
					<image mode="widthFix" style="width:40rpx;margin:0 auto;" src="https://resourse.cnlhjt.com/upload/20230110/bbab60ff29729617fc29a597ba5b7259.png" @click="cancelvote"></image>
				</view>
			</u-popup>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {
		getVoteStatus,getVoteItem,vote
	} from "@/service/questionService.js";
	export default {
		data () {
			return {
				pid:0,
				span:'',
				child:false,
				
				detail:{},
				content:'',
				showvote:false,
				comment:'',
				ticket:0,
				list:[],
				showEmpty:false,
				
				alllist:[],
				pagecon:'下一项',
				secondlist:[]    ,//备用
				secondId:0
			}
		},
		onLoad(options) {
			this.pid=options.id;
			this.span=options.span;
			this.child=options.child;
			console.log(options.child);
			getVoteItem({id:options.id}).then(this.getVoteItem);
		},
		mounted() {
			getVoteStatus().then(this.getVoteStatus);
			
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			getVoteStatus(e){
				var that=this;
				if(e.code==200){
					this.secondlist=e.result;
					if(this.child=='false'){
						this.alllist=e.result;
						
					}else{
						for(var i=0;i<=e.result.length-1;i++){
							if(e.result[i].child!=false){
								that.secondId=e.result[i].id;
								that.alllist=e.result[i].child;
							}
						}
					}
					
				}
			},
			tovote(item){
				this.comment=item.description;
				this.ticket=item.num+1;
				// this.showvote=true;
				vote({
					vid:item.id,
				}).then(res=>{
					if(res.code==200){
						this.showvote=true;
						
						getVoteItem({id:this.pid}).then(this.getVoteItem);
						
					}else{
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							url: ''
						});
					}
				})
			},
			tolastpage(){
				var that=this;
				var id=parseInt(this.pid)+1;
				
				for(var i=0;i<=that.alllist.length-1;i++){
					if(this.alllist[i].id==id){
						if(this.alllist[i].child==false){
							that.showvote=false;
							that.span=that.alllist[i].span;
							this.pid=id;
							getVoteItem({id:id}).then(this.getVoteItem);
							break;
						}else{
							this.secondlist=this.alllist;
							this.secondId=id;
							this.alllist=this.alllist[i].child;
							getVoteItem({id:this.alllist[0].id}).then(this.getVoteItem);
							this.child='true';
							this.pid=this.alllist[0].id;
							this.showvote=false;
							that.span=that.alllist[0].span;
							
							break;
							// if(){}
							
						}
						
					}
				}
				
				if(id>that.alllist[that.alllist.length-1].id){
					if(this.child=='true'){
						
						this.alllist=this.secondlist;
						this.pid=this.secondId;
						var id=parseInt(this.pid)+1;
						this.child='false';
						for(var i=0;i<=that.alllist.length-1;i++){
							if(this.alllist[i].id==id){
								if(this.alllist[i].child==false){
									that.showvote=false;
									that.span=that.alllist[i].span;
									this.pid=id;
									getVoteItem({id:id}).then(this.getVoteItem);
									break;
								}else{
									this.secondlist=this.alllist;
									this.secondId=id;
									this.alllist=this.alllist[i].child;
									getVoteItem({id:this.alllist[0].id}).then(this.getVoteItem);
									this.child='true';
									this.pid=this.alllist[0].id;
									this.showvote=false;
									that.span=that.alllist[0].span;
									
									break;
									// if(){}
									
								}
								
							}
						}
					}else{
						that.pagecon='没有了';
						setTimeout(function(){
							that.cancelvote();
						},2000)
						this.secondlist=[]
					}
					
				}
				
					
					
				
			},
			getVoteItem(e){
				if(e.code==200){
					this.list=e.result;
					this.showEmpty=false
				}else{
					this.list=[];
					this.showEmpty=true
				}
			},
			cancelvote(){
				this.showvote=false;
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: darkred;
		background-image: url('https://resourse.cnlhjt.com/upload/20230110/5cfa2eb011353ecc79cc0f8597492065.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.vote_head{
		text-align: center;
		padding:30rpx 0 20rpx;
		.vote_title{
			width:45%;
			height:80rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			margin:0 auto;
		}
		.fu_title{
			margin:40rpx 0;
			font-size: 28rpx;
			color:#333;
		}
		.title_decri{
			width:85%;
			padding:20rpx;
			margin:0 auto;
			color:#fff;
			text-align: left;
			font-size: 28rpx;
			background-image: url('https://resourse.cnlhjt.com/upload/20230110/5224eaacffc2ddddfbde627850453e32.png');
			background-size: 100% 100%;
			background-position: center center;
		}
	}
	.vote_con{
		width:90%;
		text-align: center;
		margin-top: 20rpx;
		padding:20rpx 0;
		box-shadow: 0 0 10rpx #ddd;
		border-radius: 10rpx;
		.vote_img{
			width:85%;
			height:300rpx;
			border:5rpx solid #ffb07d;
			// border-radius: 50%;
		}
		.num_vote{
			position: absolute;
			top:10rpx;
			left:10rpx;
			width:40rpx;
			height:40rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 40rpx;
			color:#c82900;
			font-size: 25rpx;
			background-color: #ffb07d;
		}
		.dp{
			font-size: 26rpx;
			color:#666;
			margin:12rpx 0 5rpx;
		}
		.vote_btn{
			display: inline-block;
			// padding:5rpx 30rpx;
			width:120rpx;
			font-size: 26rpx;
			color:#fff;
			// background-color: red;
			// border-radius: 8rpx;
			// font-family:jianti;
		}
	}
	.com{
		width:60%;
		font-size: 24rpx;
		font-family: 'Times New Roman', Times, serif;
		line-height: 35rpx;
		// font-family:"隶书";
		left:120rpx;
		top:250rpx;
	}
	.lastpage{
		width:100%;
		bottom:280rpx;
		color:#ffb07d;
		font-weight: bold;
		text-align: center;
	}
	.ticket_btn{
		bottom:180rpx;
		left:20%;
		width:62%;
		height:70rpx;
		color:#62270b;
		font-weight: bold;
		text-align: center;
		line-height: 68rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20230110/bc90c526119ff01355d413c550721bfd.png');
		background-size: 100% 100%;
		background-position: center center;
	}
</style>